<template>
	<view>
<!--		重新加了代码-->
		<view class="top"></view>
		<uni-card>
			<cc-pickerView leftTitle="是否离开武汉" name="orientations" placeholder="请选择房屋朝向" @change="towardPickerChange"
				:value="value" :range="range"></cc-pickerView>
			<view class="hr"></view>
			<cc-pickerView leftTitle="请假类型" name="orientations" placeholder="请选择房屋朝向" @change="towardPickerChange"
				:value="value" :range="range"></cc-pickerView>
		</uni-card>
		<uni-card>
			<uni-row>
				<uni-col :span="19"><text class="target">请填写离校目的地的地址(非出发地) </text></uni-col>
				<uni-col :span="5">
					<button @click="addBtn" class="uni-button" size="mini" type="default">
						<image class="uni-image" src="../../static/Plus.png" mode=""></image>
						<view style="display: inline;">
							<text class="addbtn">添加</text>
						</view>
					</button>
				</uni-col>
			</uni-row>
			<view v-for="(item, index) in arr" style="position: relative;margin-bottom: 10px;">
				<image @click="delBtn(index)" src="../../static/del.png" class="uni-image del" mode=""></image>
				<uni-card style="margin: 0px">
					<cc-pickerView leftTitle="请假类型" name="orientations" placeholder="请选择房屋朝向"
						@change="towardPickerChange" :value="value" :range="range"></cc-pickerView>
					<view class="hr"></view>
					*详细地址 <br>
					<textarea placeholder="请详细填写地址信息，如小区名门牌号等" auto-height />
				</uni-card>
			</view>
		</uni-card>
		<uni-card>
			<view>
				<text class="head">附件</text>
			</view>
			<view calss="content">
				病假的同学请上传医院证明，其余请假同学请上传其他证明材料，图片单张大小不超过2M
			</view>
			<view>
				<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
			</view>
		</uni-card>
		<uni-card>
			<timeline>
				<timelineItem leftTime='' color="#2264FF" innerColor="#FFFFFF">
					<view class="tripItem">
						<uni-row>
							<uni-col :span="20">
								<view class="title">您接收了健康教育内容推送</view>
								<view class="tips">内容：xxxx</view>
							</uni-col>
							<uni-col :span="4">
								<view class="ava">
									<text class="ava-text">张</text>
								</view>
							</uni-col>
						</uni-row>
					</view>	
				</timelineItem>
				<timelineItem leftTime=''>
					<view class="tripItem">
						<view class="title">您接收了健康教育内容推送</view>
						<view class="tips">内容：xxx</view>
					</view>
				</timelineItem>
			</timeline>
		</uni-card>
	</view>
</template>

<script setup>
	import timeline from '../../components/chenbin-timeline/timeLine.vue'
	import timelineItem from '../../components/chenbin-timeline/timelineItem.vue'
	import {
		ref
	} from 'vue'
	let value = ref(1)
	let range = ref(['东', '南', '西', '北', '南北'])
	let towardPickerChange = function(e) {
		this.value = e.target.value; // 切换的值的索引值
	}
	let arr = ref([{
		area: '',
		address: ''
	}])

	let addBtn = function() {
		console.info(111)
		arr.value.push({
			area: '',
			address: ''
		})
	}

	let delBtn = function(index) {
		arr.value.splice(index, 1)
	}
</script>

<style scoped>
	.top {
		position: absolute;
		top: -30rpx;
		height: 119px;
		width: 100%;
		background: linear-gradient(180.00deg, #2264ff 0%, #f5f5f5 100%);
	}

	.uni-card {
		border-radius: 24rpx;
	}

.ava{
	width: 42px;
	height: 42px;
	background: #2264ff;
	border-radius: 50%;
	text-align: center;
}
.ava-text{
	font-weight: 700;
	font-size: 18px;
	color: #fff;
	line-height: 42px;
}
	.hr {
		border-top: 0.5px solid #DBDBDB;
	}

	.del {
		position: absolute;
		left: -8px;
		z-index: 999;
		top: 47px;
	}

	.target {
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 14px;
		text-align: left;
		color: #000;
		position: relative;
		top: 2px;
	}

	.head {
		color: #1a1a1a;
		font-size: 14px;
		font-face: PingFang SC;
		font-weight: 400;
		letter-spacing: 0;
	}

	.content {
		font-family: "PingFang SC";
		font-weight: 400;
		font-size: 12px;
		text-align: left;
		color: #b3b3b3;
	}

	.uni-button {
		border-radius: 14px;
		background: #fff;
		border: 1px solid #2264ff;
		width: 60px;
		height: 28px;
		padding: 0px;
		font-size: 12px;
		text-align: center;
		color: #2264ff;
	}

	.uni-image {
		width: 16px;
		height: 16px;
		margin-top: 10rpx;
	}

	.addbtn {
		position: relative;
		top: -3px;
	}

	.mrg0 {
		margin: 0px;
	}

	.tripItem .title {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.tripItem .tips {
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 20rpx;

	}

	.tripItem {
		height: 140rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
		border-radius: 10px;
		margin-bottom: 30rpx;


	}
</style>